<template>
  <div class="my_container">
    <div class="my_card"
         v-if="user">
      <div class="avatar">
        <div class="left">
          <img class="img_avatar"
               src="../../assets/logo.png" />
          <span>{{userInfo.name}}</span>
        </div>
        <div class="right">
          <van-button size="mini"
                      to="/user/profile"
                      round>编辑资料</van-button>
        </div>
      </div>
      <div class="details">
        <div class="detail_item">
          <h2>{{userInfo.art_count}}</h2>
          <p>文章数量</p>
        </div>
        <div class="detail_item">
          <h2>{{userInfo.follow_count}}</h2>
          <p>已关注</p>
        </div>
        <div class="detail_item">
          <h2>{{userInfo.fans_count}}</h2>
          <p>粉丝数量</p>
        </div>
        <div class="detail_item">
          <h2>{{userInfo.like_count}}</h2>
          <p>累计获赞</p>
        </div>
      </div>
      <van-grid :column-num="2"
                clickable
                class="grid_nav">
        <van-grid-item class="grid_item">
          <i class="iconfont icon-xingxing"></i>
          <span>我的收藏</span>
        </van-grid-item>
        <van-grid-item class="grid_item">
          <i class="iconfont icon-shizhong1"></i>
          <span>历史足迹</span>
        </van-grid-item>
      </van-grid>
      <van-cell title="消息通知"
                is-link />
      <van-cell title="小智同学"
                is-link />
      <van-cell class="login_out"
                v-if="user"
                @click="out"
                clickable
                title="退出登录" />
    </div>

    <div class="login_head"
         v-else>
      <div class="go_login"
           @click="$router.push('/login')">
        <i class="iconfont icon-shouji1"></i>
        <p>登录 / 注册</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getUserInfo } from '@/api/user.js'
export default {
  name: 'MyIndex',
  data () {
    return {
      userInfo: {}
    }
  },
  created () {
    this.loadUserInfo()
  },
  methods: {
    out () {
      this.$dialog.confirm({
        title: '确认退出吗?'
      }).then(() => {
        window.localStorage.removeItem('TOUTIAO_TOKEN')
        this.$router.push('/login')
      }).catch(() => {

      })
    },
    async loadUserInfo () {
      try {
        const { data } = await getUserInfo()
        this.userInfo = data.data
        // console.log(this.userInfo)
      } catch (err) {
        this.$toast('获取个人用户数据失败')
      }
    }
  },
  computed: {
    ...mapState(['user'])
  }
}
</script>

<style lang="less" scoped>
.login_head,
.my_card {
  box-sizing: border-box;
  height: 380px;
  padding: 100px 0 0 0;
  background: rgb(0, 255, 175);
  background: linear-gradient(
    56deg,
    rgba(0, 255, 175, 1) 15%,
    rgba(21, 167, 151, 1) 47%
  );
  color: #484848;
  .go_login {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 176px;
    height: 176px;
    background-color: #f4f6f8;
    border-radius: 50%;
    border: 7px solid #41ba8a;
    box-shadow: 3px 3px 5px 5px rgba(64, 172, 117, 0.5);
    color: #15a797;
    .iconfont {
      color: #15a797;
      font-size: 79px;
      margin-top: 13px;
    }
    p {
      font-size: 26px;
      margin-top: 10px;
    }
  }
}
.my_card {
  .avatar {
    display: flex;
    margin-top: -20px;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;
      .img_avatar {
        width: 118px;
        height: 118px;
        border-radius: 50%;
        border: 6px solid #f5f5f6;
        box-shadow: 0px 0px 10px 8px rgba(64, 172, 117, 0.7);
        margin: 0 36px;
      }
      span {
        font-size: 28px;
      }
    }
    .right {
      display: flex;
      align-items: center;
      margin-right: 36px;
    }
  }
}
.details {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 30px;
  .detail_item {
    box-sizing: border-box;
    height: 100px;
    flex: 1;
    text-align: center;
    line-height: 15px;
    justify-content: center;
    margin: 30px;
    border-radius: 8px;
    color: #484848;
    p {
      font-size: 22px;
    }
  }
}
.grid_nav {
  .grid_item {
    height: 130px;

    i {
      font-size: 50px;
      color: #ffd400;
    }
    span {
      font-size: 26px;
    }
  }
}
.login_out {
  margin-top: 22px;
  color: #dd5145;
  text-align: center;
}
</style>
